<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>清除内外边距</title>
  <style>
    /* 网页元素很多带有默认的内外边距，而且不通浏览器默认的也不一致。因此我们在布局前，首先要清除网页元素的内外边距 
    清除时使用 * ,也叫做通配符选择器,网页中的其他元素都会继承这个选择器
    */

    * {
      margin: 0;
      padding: 0;
    }

    /* 注意:行内元素为了照顾兼容性,尽量只设置左右内外边距,不设置上下内外边距,因为设置上下内外边距无效
        如果转换为块级元素或行内块级元素,则可以设置上下内外边距 
    */

    span {
      margin: 0 20px;
      padding: 0 80px;
    }

    span {
      display: inline-block;
      margin: 50px;
    }
  </style>
</head>
<body>
  123
  <ul>
    <li>这是li中的内容</li>
  </ul>

  <span>
    <strong>行内元素只设置左右内外边距,不设置上下内外边距,因为设置上下内外边距无效</strong><br>
    <strong>如果转换为块级元素或行内块级元素,则可以设置上下内外边距</strong>
  </span>
</body>
</html>